<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写游记</title>
    <link href="${pageContext.request.contextPath}/css/notes/write_notes.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor/lang/zh-CN.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css"
          media="all">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
</head>
<body>

<script type="text/javascript">

    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            //是否允许浏览服务器已上传文件,默认是false
            themeType: 'default',
            allowFileUpload: false,//
            allowImageUpload: true,//允许上传图片
            allowFileManager: true,//允许上传图片进行管理
            uploadJson: '${pageContext.request.contextPath}/image/uploadImg',
            fileManagerJson: '${pageContext.request.contextPath}/image/uploadImg',
            formatUploadUrl: false,
            allowImageRemote: true, //上传图片框网络图片的功能，false为隐藏，默认为true
            colorTable: [
                ['#000000', '#E56600', '#64451D', '#DFC5A4', '#FFE500', '#009900', '#006600', '#99BB00'],
                ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE', '#666666', '#6666ff'],
                ['#E53333', '#993300', '#333300', '#003300', '#003366', '#000080', '#333399', '#333333'],
                ['#800000', '#FF6600', '#808000', '#008080', '#0000FF', '#666699', '#CCFFFF', '#CCFFCC'],
                ['#FF0000', '#FF9900', '#99CC00', '#339966', '#33CCCC', '#3366FF', '#800080', '#99CCFF'],
                ['#FF00FF', '#FFCC00', '#FFFF00', '#00FF00', '#00FFFF', '#00CCFF', '#993366', '#CC99FF'],
                ['#808080', '#FFCC99', '#FFFF99', '#808080', '#999999', '#C0C0C0', '#CCCCCC', '#FFFFFF']],
            // items : [
            //     'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
            //     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            //     'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
            //     'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
            //     'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
            //     'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
            //     'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
            //     'anchor', 'link', 'unlink', '|', 'about','image'
            // ],
            items: [
                'image',
                'media', 'hr', 'emoticons', 'baidumap',
                'anchor', 'link', 'unlink',
            ],
            afterUpload: function (result) {
                console.log(result)
                editor.sync();
            },//图片上传后，将上传内容同步到textarea中
            afterBlur: function () {
                editor.sync();
            }  //焦点问题，这里不写会出问题.同步KindEditor的值到textarea文本框
        });

        document.querySelector(".btn-submit").onclick = function () {
            //提取编辑器内容
            var contentText = editor.text();
            console.log("contentText" + contentText)
        }
        //清空编辑器内容
        editor.html("");

    });
</script>
<script type="text/javascript">
function validateValueS() {
    return !!$.formValidator.pageIsValid();
}

</script>
<c:import url="/header/header.jsp"/>

<div class="head-title">
    <!--=============标题内容=================-->
    <div class="title-content">
        <span class="youji">游记</span>
        <span class="guanlian">关联值具体的旅行目的地</span>
    </div>
</div>
<div class="wrapper">

    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>主图片点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px" class="img">
        </div>
    </div>
    <!--==================主题部分==================-->
    <div class="main">
        <form action="${pageContext.request.contextPath}/travelnote/notes/write_notes" method="post" onsubmit="return beforeSubmit(this);" name="form">
            <input type="text" name="custId" style="visibility:hidden;" class="custid" value="">
            <input type="text" style="visibility:hidden;" class="main-photoUrl" value="" name="mainImgUrl">
            <ul>
                <li class="input-title">
                    <label>游记标题:
                        <input type="text" placeholder="请在这里输入标题" class="title" name="title">
                    </label>
                </li>
                <li class="input-title">
                    <label>简述:
                        <input type="text" placeholder="请简要描述一下此次旅行" class="describe" name="describe">
                    </label>
                </li>
                <li class="input-title">
                    <label>旅行天数:
                        <input type="text" class="days" name="days">天
                    </label>
                </li>
                <li class="input-title">
                    <div class="layui-inline">
                        <label class="layui-form-label">出行日期:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test5" name="date">
                        </div>
                    </div>
                </li>
                <li class="input-title">
                    <label>景点位置:
                        <input type="text" class="loc" name="loc">
                    </label>
                </li>
                <li class="input-content">
                    <textarea name="content" style="width:100%;height:520px;"></textarea>
                </li>

                <li class="publish-btn">
                    <input class="btn-submit" value="发表" type="submit">
                </li>
            </ul>
        </form>
    </div>
    <script>
        function beforeSubmit(form){
            if(form.mainImgUrl.value===''){
                alert('记得上传主图片呦！');
                form.mainImgUrl.focus();
                return false;
            }
            if(form.title.value===''){
                alert('标题不能为空！');
                form.title.focus();
                return false;
            }
            if(form.describe.value===''){
                alert('稍微描述一下也是可以的！');
                form.describe.focus();
                return false;
            }
            if(form.days.value==='') {
                alert('说说去了几天吧！');
                form.days.focus();
                return false;
            }
            if(form.date.value==='') {
                alert('出发日期没有写！');
                form.date.focus();
                return false;
            }
            if(form.loc.value==='') {
                alert('没有写景点位置！');
                form.loc.focus();
                return false;
            }
            if(form.content.value==='') {
                alert('不写点什么嘛！');
                form.content.focus();
                return false;
            }
            return true;
        }
    </script>

</div>
<%--<form enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/image/upload">--%>
<%--    文件：<input type="file" name="fileUpload"/>--%>
<%--    <input type="submit" value="上传"/>--%>
<%--</form>--%>

</body>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
<script>

    var photoPath;
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month
            + seperator1 + strDate + " " + date.getHours() + seperator2
            + date.getMinutes() + seperator2 + date.getSeconds();
        return currentdate;
    }
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test5',
            max : getNowFormatDate(),
            type: 'datetime'
        });
    })

    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        upload.render({
            elem: '#test10'
            ,url: '${pageContext.request.contextPath}/image/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,multiple: true
            ,before:function(obj){
                //预读本地文件示例
                obj.preview(function(index, files, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log(res)
                var photoName = res.url;
                photoPath = "http://rbtgr2byj.hn-bkt.clouddn.com/"+photoName;
                console.log(photoPath)
                layer.msg('上传成功');
                // layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', photoPath);
                $("#uploadDemoView").removeClass('layui-hide')
                $(".img").attr("src",photoPath)
                $(".main-photoUrl").attr("value",photoPath)
            }
        });
    })
    var custId;
    var customer = '<%=request.getSession().getAttribute("loginCustomer")%>';
    custId = '${loginCustomer.custId}';
    console.log(custId)
    $(".custid").attr("value",custId)
</script>

<script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
</html>